/*
 * @Author: lusx 
 * @Date: 2020-05-22 13:54:23 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-26 14:59:36
 */
import React, { useState, useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import { toJS } from 'mobx';
import { TabBar, Icon } from 'weaver-mobile';
import Chart from './chart';
import Overall from './overall';
import Status from './status';
export default class Statistics extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          actionKey: '0',
        }
      }

    render(){
        const { match: { path, url }, history: { push } } = this.props;
        const { actionKey } = this.state;
        return (
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
                <Switch>
                    <Route path="/quickbar/statistics" name='overall' >
                        <Overall {...this.props} />
                    </Route >
                    <Route path="/quickbar/status" name='status'>
                        <Status {...this.props}/>
                    </Route>
                </Switch>
                {false && <TabBar
                    unselectedTintColor='#949494'
                    tintColor='#33A3F4'
                    barTintColor='white'
                    prerenderingSiblingsNumber={0}
                    tabBarPosition='bottom'
                >
                    <TabBar.Item
                        title='整体监控'
                        key='0'
                        icon={<Icon type='renwu-o' />}
                        selectedIcon={<Icon type='renwu' />}
                        selected={actionKey === '0'}
                        onPress={() => { this.setState({actionKey:'0'}); push(`${url}`) }}>
                        <Switch>
                            <Route path={path} name='overall' >
                                <Overall {...this.props} />
                            </Route >
                        </Switch>
                    </TabBar.Item>
                    <TabBar.Item
                        title='状态统计'
                        key='1'
                        icon={<Icon type='shake-big' />}
                        selectedIcon={<Icon type='shake-big' />}
                        selected={actionKey === '1'}
                        onPress={() => { this.setState({actionKey:'1'}); push(`${url}/status`) }}>
                        <Switch>
                            <Route path={`${path}/status`} name='status'>
                                <Status {...this.props}/>
                            </Route>
                        </Switch>
                    </TabBar.Item>
                </TabBar>}
            </div>
        )
    }
}